<template>
  <div class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header">
      <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
        <img src="~@/assets/img/logo.png" style="width: 58px; height: 36px; border-radius: 5px" alt="">
        <a class="site-navbar__brand-lg" href="javascript:;" :title="ver">管理后台</a>
      </h1>
    </div>
    <div class="site-navbar__body clearfix">
      <el-menu class="site-navbar__menu" mode="horizontal" :default-active="rootActiveName + ''" @select="selectTopMenuHandle">
        <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
          <icon-svg name="zhedie"></icon-svg>
        </el-menu-item>
        <!-- 顶部菜单 暂时去掉-->
        <!--<el-menu-item v-for="menu in menuList" :key="menu.menuId" :index="menu.menuId + ''">
          <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
          <span>{{ menu.name }}</span>
        </el-menu-item>-->
        <div style="display: flex; align-items: center; line-height: 100%; color: #fff">
          {{path.join('&nbsp;/&nbsp;')}}
        </div>
      </el-menu>
      <!--  右上角登出修改密码 菜单-->
      <el-menu
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal">
        <!--<el-menu-item index="2" @click="$router.push({ name: 'theme' })">-->
          <!--<template slot="title">-->
            <!--<el-badge is-dot value="new">-->
              <!--<icon-svg name="xitongpeizhi" class="el-icon-setting"></icon-svg>-->
            <!--</el-badge>-->
          <!--</template>-->
        <!--</el-menu-item>-->
        <!--<ContactKeFu></ContactKeFu>-->
        <el-menu-item class="site-navbar__avatar" index="3">
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link">
              <img :src="userInfo.avatar" alt=""><span style="color: #fff">您好! {{userInfo.nickname || '管理员'}}</span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!--<el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>-->
              <!--<el-dropdown-item @click.native="editPassword">
                <i class="el-icon-edit"></i>
                修改密码
              </el-dropdown-item>-->
              <el-dropdown-item @click.native="logoutHandle()">
                <i class="el-icon-setting" style="color: #f56c6c"></i>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<style>
  .site-navbar__body {
    background-color: rgba(13, 73, 133, 1)
  }
  .el-menu--horizontal>.el-menu-item {
    color: #ffffff;
  }
  .el-menu--horizontal>.el-menu-item.is-active {
    color: #ffffff;
    background-color: rgba(10, 62, 114, 1);
  }

  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    color: #303133;
  }


  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
    background-color: rgba(10, 62, 114, 1);
  }
  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus{
    color: #fff;
  }

  .site-navbar__brand-lg{
    font-size: 0.9em;
  }

  .site-sidebar--dark .site-sidebar__menu.el-menu .el-submenu.is-active > .el-submenu__title{
    color: #fff;
  }


  .site-sidebar--dark .site-sidebar__menu.el-menu .el-menu-item:focus{
    background-color: rgba(24, 144, 255, 1);
  }

  .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover
  {
    background-color: rgba(0,0,0,0);
    color: #409eff;
  }

  .site-navbar__menu {
    max-width: 80%;
    display: flex;
    overflow-x: auto;
  }
  .site-navbar__menu::-webkit-scrollbar {
    height: 9px;
    width: 10px;
  }
  .site-navbar__menu::-webkit-scrollbar-thumb{
    width:4px;
    background-color:rgba(225,225,225,0.5);
    border-radius:3px;
  }
  .el-dropdown-menu__item .active {
    color: #409eff;
  }
</style>
<script>
  import api from '@/utils/api'
  import {removeToken} from '@/utils/auth'
  import {mapGetters} from 'vuex'
  export default {
    components: {

    },
    data () {
      return {
        ver: window.SITE_CONFIG['version'],
        menuList: [],
        dynamicMenuRoutes: [],
        editShow: false
      }
    },
    created () {
      // this.ver = window.SITE_CONFIG['version']
      console.log(this.ver)
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
    },
    computed: {
      ...mapGetters(['appList', 'curApp']),
      rootActiveName: {
        get () {
          return this.$store.state.common.rootActiveName
        },
        set (val) {
          this.$store.commit('common/updateRootActiveName', val)
        }
      },
      navbarLayoutType: {
        get () {
          return this.$store.state.common.navbarLayoutType
        }
      },
      sidebarFold: {
        get () {
          return this.$store.state.common.sidebarFold
        },
        set (val) {
          this.$store.commit('common/updateSidebarFold', val)
        }
      },
      mainTabs: {
        get () {
          return this.$store.state.common.mainTabs
        },
        set (val) {
          this.$store.commit('common/updateMainTabs', val)
        }
      },
      userInfo: {
        get () {
          return this.$store.getters.userInfo || {}
        }
      },
      jumpUrlConfig () {
        return this.$store.state.jumpUrlConfig
      },
      path () {
        return this.$store.state.path
      }
    },
    methods: {
      // 切换client
      changeCurApp (item) {
        if (item.urlParam === this.curApp.urlParam) return
        this.$store.dispatch('user/setCurApp', item)
        localStorage.setItem('curApp', JSON.stringify(item))
        this.$store.commit("app/SET_LOADING_STATE", true)
        const params = {
          urlParam: item.urlParam
        }
        this.$store.dispatch('user/getLoginToken', params).then(response => {
          this.$router.go(0)
        }).catch(error => {
          console.log(error)
        })
      },
      // 修改密码
      selectTopMenuHandle (index) {
        this.rootActiveName = index
        this.$store.commit('common/updateRootActiveName', index)
      },
      // 修改密码
      editPassword () {
        this.editShow = true
      },
      // 退出
      logoutHandle () {
        sessionStorage.setItem('jumpUrlConfig', JSON.stringify(this.$store.state.jumpUrlConfig))
        this.$confirm(`确定进行[退出]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.logout()
          removeToken()
          this.$store.commit('common/updateMainTabs', [])
          this.$router.replace({
            name: 'Login',
            query: {
              redirect: this.$route.path
            }
          })
        }).catch(() => {
        })
      },
    }
  }
</script>

